import React from 'react';
import { Row, Col, Card, Statistic } from 'antd';
import {
  UserOutlined,
  MedicineBoxOutlined,
  ShoppingCartOutlined,
  DollarOutlined,
} from '@ant-design/icons';
import styles from './styles.module.less';

const DashboardPage: React.FC = () => {
  // TODO: 从API获取统计数据
  const stats = {
    totalUsers: 1234,
    totalMedicines: 567,
    totalOrders: 89,
    totalRevenue: 12345.67,
  };

  return (
    <div className={styles.dashboard}>
      <h2>仪表盘</h2>
      <Row gutter={[24, 24]} className={styles.statsRow}>
        <Col xs={24} sm={12} lg={6}>
          <Card>
            <Statistic
              title="总用户数"
              value={stats.totalUsers}
              prefix={<UserOutlined />}
            />
          </Card>
        </Col>
        <Col xs={24} sm={12} lg={6}>
          <Card>
            <Statistic
              title="药品数量"
              value={stats.totalMedicines}
              prefix={<MedicineBoxOutlined />}
            />
          </Card>
        </Col>
        <Col xs={24} sm={12} lg={6}>
          <Card>
            <Statistic
              title="订单数量"
              value={stats.totalOrders}
              prefix={<ShoppingCartOutlined />}
            />
          </Card>
        </Col>
        <Col xs={24} sm={12} lg={6}>
          <Card>
            <Statistic
              title="总收入"
              value={stats.totalRevenue}
              precision={2}
              prefix={<DollarOutlined />}
            />
          </Card>
        </Col>
      </Row>

      {/* TODO: 添加图表和其他统计信息 */}
    </div>
  );
};

export default DashboardPage; 